<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model通信</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<my-input type="text" title="姓名" v-model="uname"></my-input>
			<my-input type="password" title="密码" v-model="pass"></my-input>
			<my-input type="number" title="电话" v-model="phone"></my-input>
			
			<button type="submit" @click="getClick">提交</button>
		</div>
		<script type="text/javascript">
			Vue.component("myInput", {
				template: `
					<div>
					    <label>{{title}}</label>
					    <input :type="type" @input="handleInput" :value="value"/>
					</div>
				`,
				props:["type","title","value"],
				methods:{
					handleInput(e){
						this.$emit("input",e.target.value);
					}
				}
			})
			
			let vm = new Vue({
				el:"#app",
				data:{
					uname:"",
					pass:"",
					phone:""
				},
				methods:{
					getClick(){
						console.log(this.uname,this.pass,this.phone);
					}
				}
			})
		</script>
	</body>
</html>
